<template>
    <div id="app">
        <canvas id="bgLogoCanvas" ref="bgLogoCanvas"></canvas>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'App',
        mounted: function () {
            var canvas = document.getElementById('bgLogoCanvas')
            var ctx = canvas.getContext('2d')
            ctx.rotate(-20 * Math.PI / 180)
            ctx.fillStyle = 'rgba(100,100,100,0.20)'
            ctx.font = '14px Arial'
            ctx.fillText('Hello Pabu!', 20, 120)
            var data = canvas.toDataURL('image/png', 1)
            var app = document.getElementById('app')
            app.style.backgroundImage = 'url(' + data + ')'
        },
        methods: {},
        beforeCreate() {
        },
        created() {
            //在页面加载时读取localStorage里的状态信息
            localStorage.getItem("pabo")
            && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem("pabo"))));
            //在页面刷新时将vuex里的信息保存到localStorage里
            window.addEventListener("beforeunload", () => {
                localStorage.setItem("pabo", JSON.stringify(this.$store.state))
            })
        }
    }
</script>

<style>
    /* CSS */
    * {
        margin: 0;
        padding: 0;
        float: none;
    }

    html, body, #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #bgLogoCanvas {
        position: absolute;
        width: 300px;
        height: 150px;
        display: none;
    }

    /* element ui样式重写 */
    .el-table,
    .el-table th, .el-table tr {
        background: none !important;
    }

    /* google 浏览器滚动条 */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #5cadff;
        border-radius: 3px;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
    }

    #nav {
        padding: 30px;
    }

    #nav a {
        font-weight: bold;
        color: #2c3e50;
    }

    #nav a.router-link-exact-active {
        color: #42b983;
    }


</style>
